<template>
  <div class="container">
    <header class="header flex">
      <div class="header-left">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="() => {this.$router.push('/staff-center/create')}">添加员工</el-button>
      </div>
      <div class="header-right">
        <el-input
          placeholder="请输入员工姓名"
          v-model="name"
          size="small">
          <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
        </el-input>
      </div>
    </header>
    <section class="main">
      <el-table
        :data="staffList"
        align="center"
        :height="tableHeight"
        border
        size="small"
        style="color: #000000"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        >
        <el-table-column type="index" width="60" label="序号" align="center" fixed>
          <template slot-scope="scope">
            {{ scope.$index + 1 + (pageNum - 1) * pageSize}}
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" fixed>
          <template slot-scope="scope">
            {{ scope.row.staffName }}
          </template>
        </el-table-column>
        <el-table-column label="部门" align="center">
          <template slot-scope="scope">
            {{ scope.row.department }}
          </template>
        </el-table-column>
        <el-table-column label="职位" align="center">
          <template slot-scope="scope">
            {{ scope.row.role }}
          </template>
        </el-table-column>
        <el-table-column label="工作城市" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.workCity }}
          </template>
        </el-table-column>
        <el-table-column label="手机" align="center">
          <template slot-scope="scope">
            {{ scope.row.phoneNumber }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column label="职能" align="center" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roleFunction" placement="top">
              <div class="col-desc">{{ scope.row.roleFunction }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.staffStatus === 1">在职</el-tag>
            <el-tag v-else type="danger">已离职</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="onEdit(scope.row)" size="small">编辑</el-button>
            <el-button type="text" @click="onCheck(scope.row)" style="color: gray" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </section>
  </div>
</template>
<script>
import { searchStaff } from '@/api/staffCenter';
export default {
  name: 'StaffCenter',
  data() {
    return {
      tableHeight: window.innerHeight - 172,
      name: '',
      staffList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 1,
    }
  },
  created() {
    this.onSearch();
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.onSearch();
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.onSearch();
    },
    onEdit(value) {
      this.$router.push({path: `/staff-center/edit/${value.staffID}`, query: {staffID: value.staffID}});
    },
    onCheck(value) {
      this.$router.push({path: `/staff-center/detail/${value.staffID}`, query: {staffID: value.staffID}});
    },
    onSearch() {
      const params = {
        name: this.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      searchStaff(params).then((res) => {
        if (res.data.code === 20000) {
          const data = res.data.data;
          this.total = data.totalSize;
          this.pageNum = data.pageNum;
          this.pageSize = data.pageSize;
          this.staffList = data.content;
        }
      }).catch((error) => {
        console.log(error);
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container {
  width: 100%;
  height: 100%;
  .header {
    height: 20px;
    padding: 20px 0;
  }
  .main {
    height: auto;
    .col-desc {
      width: 200px;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
    }
  }
}
</style>
<style>
.el-table th.el-table__cell {
  color: #000000;
  background: #F9FBFC;
}
</style>
